{% extends 'base.html' %}
{% block content %}
    <body>
        {% if success==True %}
            <div class="alert alert-success fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <li class="fas fa-check-circle fa-fw" aria-hidden="true" style="font-size:18px"></li><strong>提交成功！</strong>您可以点击<a href="/admin" class="alert-link">这里</a>查看其它同学提交的内容。
            </div>
        {% endif %}
        <div class="jumbotron jumbotron-fluid text-center">
            <div class="container">
                <h1>请填写您的同学录：</h1>
                <p>已经有{{ count }}位同学提交哦！</p>
            </div>
        </div>
        <div class="container">
            <form action="/" method="POST" enctype="multipart/form-data">
                <div class="form-group input-group-sm">
                    <label for="usr"><i class="fas fa-user fa-2x fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;您的名字：(必填）</label>
                    <input type="text" name="Name" class="form-control" id="usr" required="required">
                </div>
                <div class="form-group input-group-sm">
                    <label><i class="fas fa-birthday-cake fa-2x fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;您的生日：(必填）</label>
                    <input type="date" name="Birthday" class="form-control" required="required">
                </div>
                <div class="form-group input-group-lg">
                    <label><i class="fas fa-home fa-2x fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;您的住址：(必填）</label>
                    <input type="text" name="Address" class="form-control" required="required">
                </div>
                <div class="form-group input-group-sm">
                    <label><i class="fab fa-weixin fa-2x fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;您的微信号：</label>
                    <input type="text" name="Wechat" class="form-control">
                </div>
                <div class="form-group input-group-sm">
                    <label><i class="fab fa-qq fa-2x fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;您的QQ号：</label>
                    <input type="text" name="QQ" class="form-control">
                </div>
                <div class="form-group input-group-sm">
                    <label><i class="fas fa-mobile fa-2x fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;您的手机号：</label>
                    <input type="text" name="Phone" class="form-control">
                </div>
                <div class="form-group">
                    <label><i class=" fas fa-transgender fa-2x fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;您的性别：</label>
                    <select class="form-control" id="sel1" name="Sex">
                        <option>保密</option>
                        <option>男</option>
                        <option>女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-thumbs-up fa-2x fa-fw" style="font-size:24px"></i>&emsp;您想对同学说的心里话：</label>
                    <textarea rcols="180" cols="5" class="form-control" name="Wish"></textarea>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-file-image fa-2x fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;您的照片：</label>
                    <input type="file" name="Photo" accept="image/gif, image/jpeg, image/png, image/jpg">
                </div>
                <button type="submit" class="btn btn-primary"><i class="fas fa-check-circle fa-2x fa-fw" aria-hidden="true" style="font-size:20px"></i>&emsp;提交</button>
                <a href="/admin" target="_blank"><button type="button" class="btn btn-primary"><i class="fas fa-eye fa-2x fa-fw" aria-hidden="true" style="font-size:20px"></i>&emsp;看看其他同学的</button></a>
            </form>
        </div>
    </body>
{% endblock content %}